<template>
  <div class="login-page">
    <div class="login-container">
      <div class="login-logo">
        <img src="../assets/speaker-logo.svg" alt="Smart Sound Logo">
      </div>
      <h2 style="margin-bottom: 20px; color: #333;">智能音箱管理系统</h2>
      <div class="login-form">
        <div class="form-group" :class="{'input-error': usernameError}">
          <label for="username">用户名</label>
          <el-input v-model="username" placeholder="请输入用户名" @input="validateUsername"></el-input>
          <div class="error-message">用户名不能为空</div>
        </div>
        <div class="form-group" :class="{'input-error': passwordError}">
          <label for="password">密码</label>
          <el-input type="password" v-model="password" placeholder="请输入密码" @input="validatePassword" show-password></el-input>
          <div class="error-message">密码不能为空</div>
        </div>
        <!-- 移除验证码输入框 -->
        <el-button type="primary" class="login-button" @click="login" :disabled="isLocked">{{loginButtonText}}</el-button>
        <div class="login-tips">剩余尝试次数: {{attempts}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'; // 导入 axios
import { asyncRoutes, filterAsyncRoutes } from '../router'; // 导入路由相关方法
import { setAdminInfo } from '../utils/auth'; // 导入认证工具函数

export default {
  name: 'LoginPage',
  data() {
    return {
      username: '',
      password: '',
      usernameError: false,
      passwordError: false,
      attempts: 3,
      isLocked: false,
      loginButtonText: '登录'
    }
  },
  methods: {
    validateUsername() {
      this.usernameError = !this.username.trim();
    },
    validatePassword() {
      this.passwordError = !this.password.trim();
    },
    async login() { // 将 login 方法修改为异步函数
      this.validateUsername();
      this.validatePassword();
      
      if (this.usernameError || this.passwordError) { // 更新判断条件
        return;
      }

      this.loginButtonText = '登录中...';
      try {
        const response = await axios.post('https://smartsound.top/api/v1/admin/login', {
          admin_name: this.username,
          admin_key: this.password // 将 password 修改为 admin_key
        });

        // 检查后端返回的数据结构，确保 code 为 0 且返回了管理员信息
        if (response.data && response.data.code === 0 && response.data.data) {
          // 登录成功，保存管理员信息
          const adminInfo = response.data.data;
          
          // 使用认证工具函数保存管理员信息，默认24小时过期
          setAdminInfo(adminInfo);
          
          // 根据用户角色生成可访问的路由表
          this.generateRoutes(adminInfo.admin_level);
          
          this.$message.success(response.data.message || '登录成功');
        } else {
          // 登录失败，后端返回的 code 不是 0 或数据不完整
          this.$message.error(response.data.message || '用户名或密码错误');
          this.handleLoginFailure();
        }
      } catch (error) {
        console.error('登录请求出错:', error);
        // 根据 error.response 来判断具体的错误类型
        if (error.response) {
          // 请求已发出，但服务器响应的状态码不在 2xx 范围内
          // 特别处理400错误，提示更具体的信息
          if (error.response.status === 400) {
            this.$message.error(error.response.data.message || '请求参数错误，请检查输入');
          } else {
            this.$message.error(`登录请求失败: ${error.response.data.message || error.response.statusText || '服务器错误'}`);
          }
        } else if (error.request) {
          // 请求已发出，但没有收到响应
          this.$message.error('登录请求失败，请检查网络连接');
        } else {
          // 发送请求时出了点问题
          this.$message.error('登录请求失败，请稍后重试');
        }
        this.handleLoginFailure();
      } finally {
        // 不管成功还是失败，恢复按钮文字
        if (this.loginButtonText === '登录中...') {
          this.loginButtonText = '登录';
        }
      }
    },

    // 生成路由方法
    generateRoutes(role) {
      console.log(`生成路由: 管理员级别 ${role}`);
      
      // 0级管理员添加所有路由，其他级别按权限过滤
      let accessibleRoutes;
      if (role === 0) {
        // 0级管理员可以访问所有路由
        accessibleRoutes = asyncRoutes;
      } else {
        // 其他级别管理员根据权限过滤路由
        accessibleRoutes = filterAsyncRoutes(asyncRoutes, role);
      }
      
      // 将过滤后的路由添加到路由器
      accessibleRoutes.forEach(route => {
        this.$router.addRoute(route);
      });
      
      console.log('已添加动态路由:', accessibleRoutes);
      
      // 检查是否有重定向参数
      const redirect = this.$route.query.redirect;
      
      if (redirect) {
        // 如果有重定向参数，检查用户是否有权限访问该路径
        // 0级管理员可以访问任何页面
        if (role === 0) {
          this.$router.push(redirect);
        } else {
          // 其他级别管理员需要检查权限
          const canAccess = accessibleRoutes.some(route => {
            if (route.path === redirect) {
              return true;
            }
            // 检查是否是子路由或者带参数的路由（如 /user/:id）
            if (route.path.includes(':')) {
              const routePathPattern = route.path.replace(/\/:[^/]+/g, '/[^/]+');
              const regex = new RegExp(`^${routePathPattern}$`);
              return regex.test(redirect);
            }
            return false;
          });
          
          if (canAccess) {
            // 用户有权限访问该路径，重定向到原来尝试访问的页面
            this.$router.push(redirect);
          } else {
            // 用户没有权限访问该路径，按照默认逻辑跳转
            this.redirectBasedOnRole(role);
          }
        }
      } else {
        // 没有重定向参数，按照默认逻辑跳转
        this.redirectBasedOnRole(role);
      }
    },
    
    // 根据角色重定向到适当的页面
    redirectBasedOnRole(role) {
      console.log(`根据角色重定向: 管理员级别 ${role}`);
      
      // 0级和1级管理员跳转到首页，其他级别跳转到个人信息页
      if (role === 0 || role === 1) {
        this.$router.push('/');
      } else {
        this.$router.push('/profile');
      }
    },

    handleLoginFailure() {
      // 模拟登录失败
      this.attempts--;
      
      if (this.attempts <= 0) {
        this.isLocked = true;
        this.loginButtonText = '账号已锁定';
        
        // 模拟解锁倒计时
        setTimeout(() => {
          this.attempts = 3;
          this.isLocked = false;
          this.loginButtonText = '登录';
        }, 60000); // 60秒后解锁
      }
      
      // 添加抖动效果
      const formGroup = document.querySelector('.login-form'); // 修改选择器以抖动整个表单
      if (formGroup) {
        formGroup.style.animation = 'shake 0.5s';
        setTimeout(() => {
          formGroup.style.animation = '';
        }, 500);
      }
    }
  }
}
</script>

<style scoped>
.login-page {
  background-color: #f5f7fa;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1001;
}

.login-container {
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  width: 400px;
  padding: 30px;
  text-align: center;
  transition: all 0.3s;
}

.login-container:hover {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.login-logo {
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
}

.login-logo img {
  width: 100px;
  height: 100px;
  border-radius: 12px;
  background: white;
  padding: 6px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.login-logo img:hover {
  transform: scale(1.05);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

.login-form {
  margin-top: 20px;
  text-align: left;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-size: 14px;
  color: #666;
  font-weight: bold;
}

.error-message {
  color: #ff4d4f;
  font-size: 12px;
  margin-top: 5px;
  display: none;
}

.form-group.input-error .error-message {
  display: block;
}

.login-button {
  width: 100%;
  margin-top: 10px;
}

.login-tips {
  margin-top: 15px;
  color: #999;
  font-size: 12px;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-5px); }
}
</style>